import { createElement, useState } from 'rax';
import View from 'rax-view';
import Text from 'rax-text';

function JsbridgeTotal() {

    // const givenStr = window.location.href;

    const [handlerName,setHandlerName] = useState();
    const [reqParam,setReqParam] = useState('');
    const [res,setRes] = useState('');

    //处理请求参
        // let param = {
        //     handlerName: 'setLocalStorage',
        //     params: {
        //         key:'aa',
        //         value:'123'
        //     }
        // }
        // let paramStr = JSON.stringify(param)
        // // 编码后的param
        // let encodedParamStr = encodeURIComponent(paramStr)
        
        // // let givenStr = 'debug=true&param=' + '%7B%22handlerName%22%3A%22setTitle%22%2C%22params%22%3A%22%7B%5C%22title%5C%22%3A%20%5C%22%E8%AF%B7%E7%AD%89%E5%BE%85%5C%22%7D%22%7D';
        
        // console.log(givenStr);

        let reg = new RegExp("(^|&)" + "param" + "=([^&]*)(&|$)");
        let r = window.location.search.substr(1).match(reg);
    
        console.log('r:   ' + r);


        var decodeParam;
        
        if (r != null) {
             decodeParam =  decodeURIComponent(r[2]);
        };             
            console.log('decodeParam:  ' + decodeParam);

            
                    // 转换为json格式
                    var jsonParam  = JSON.parse(decodeParam);
                    // 获取请求API名称
                    var methodName = jsonParam.handlerName;
                    setHandlerName(methodName);
                    console.log('methodName:  ' + methodName);
                    // 获取API请求参数
                    var params = jsonParam.params;
                    setReqParam(JSON.stringify(params));

                    console.log('params:   ' + params);
            
        

    // 请求jsAPI
    const excuteJsbridge = () => {

        console.log('begin excuteJsbridge()');
        
        //初始化jsbridge
        ZWJSBridge.onReady(() => { 
            console.log('初始化完成后，执行bridge方法')
        });

        ZWJSBridge[methodName](params).then((result)=>{

            var resultMsg = JSON.stringify(result);
            setRes(resultMsg);
            console.log('#### ZWJSBridge'+methodName + '（）log.result:   ' + resultMsg);

        }).catch((error) =>{

            var errorMsg = JSON.stringify(error);
            setRes(errorMsg);
            console.log('#### ZWJSBridge'+methodName + 'error   :   ' + errorMsg);

        });
        console.log('exit excuteJsbridge()')
    }

  return (
    <View>
       <div>
           <h1 style={{
               textAlign:'center',
           }}
           >JSBridge调试界面</h1>
           <h5 style={{
               color:'red'
           }}
           >API名称为:</h5>
           <Text style={{
               fontSize: 20,
               color:'blue',
               textAlign:'center'
           }}
           >{handlerName}</Text>
           <div>
                      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
          </div>
           <h5 style={{
               color:'red'
           }}
           >调试入参为:</h5>
           <Text style={{
               fontSize: 20,
               color:'blue',
               textAlign:'center'
           }}>{reqParam}</Text>
           <div>
                      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
           </div>
           <h5 style={{
               color:'red'
           }}
           >响应结果为:</h5>
           <Text style={{
                 fontSize: 20,
                 color:'blue',
                 textAlign:'center'
           }}
           >{res}</Text>
           <div>
                      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                      <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
          </div>
          <button onClick = {() => excuteJsbridge()}
                        style={{
                            width: 200,
                            height: 50,
                            backgroundColor: 'lightgrey',
                            color: 'blue',
                            fontSize: 15,
                        }}             
          >点击调试</button>
       </div>
    </View>
  );
}

export default JsbridgeTotal;
